<script setup lang="ts">
import {PropType} from "vue-demi";
import EChart from "~/contentScripts/views/echart.vue";
import {SycmBrandLists} from "~/contentScripts/views/sycm/brand_monitor/SycmBrandMonitor";

// 竞争 品牌分析 关键指标统计
import {SycmTableUtils} from "~/utils/sycm/SycmTableUtils";

const props = defineProps({
  brandLists: {
    type: Object as PropType<SycmBrandLists>,
    default: {},
  },
  dates: {
    type: Array as PropType<Array<String>>,
    default: [],
  },
  showZs: {
    type: Boolean,
    default: false,
  },
});
const tabs = [
  [
    {
      title: '交易金额',
      titleZs: '交易指数',
      key: 'tradeIndex',
    },
    {
      title: '访客数',
      titleZs: '访客数',
      key: 'uv',
    },
    {
      title: '支付转化率',
      titleZs: '支付转化指数',
      key: 'payRateIndex',
    },
    {
      title: '支付买家数',
      titleZs: '客群指数',
      key: 'payByrCntIndex',
    },
    {
      title: '客单价',
      titleZs: '客单价',
      key: 'customerPrice',
    },

    {
      title: 'UV价值',
      titleZs: 'UV价值',
      key: 'uvValue',
    },
  ],
  // [
  //
  // ],
]
const activeKey = ref('tradeIndex');
const options = ref({
  // title: {
  //   text: '',
  //   // 左侧显示
  //   left: 'center',
  //   // 颜色
  //   textStyle: {
  //     color: '#666',
  //     fontSize: 14,
  //   },
  // },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    data: [],
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: props.dates,
    },
  ],
  yAxis: {
    type: 'value',
  },
  series: [],
});
const calcOptions = () => {
  const series: Array<Object> = [];
  const legend: Array<String> = [];
  const currTab = tabs.find(item => item.find(i => i.key === activeKey.value))?.find(i => i.key === activeKey.value);
  if (props.brandLists?.brand1 && props.brandLists?.brand1.CustomerTrends) {
    console.log(activeKey.value, props.brandLists.brand1.CustomerTrends);
    series.push({
      name: '品牌1',
      type: 'line',
      smooth: true,
      data: props.brandLists.brand1.CustomerTrends[activeKey.value].map((item: any) => {
        if (currTab.title.includes('支付转化率')) {
          return SycmTableUtils.tranRatio(props.showZs, item).replaceAll('%', '');
        }
        if (currTab.title.includes('率')) {
          return item * 100;
        }
        if (currTab.titleZs == currTab.title || item === null) {
          return item;
        } else {
          return SycmTableUtils.tranNumber(props.showZs, item, 0, false);
        }
      }),
    });
    legend.push('品牌1');
  }
  if (props.brandLists?.brand2 && props.brandLists?.brand2.CustomerTrends) {
    series.push({
      name: '品牌2',
      type: 'line',
      smooth: true,
      data: props.brandLists.brand2.CustomerTrends[activeKey.value].map((item: any) => {
        if (currTab.title.includes('支付转化率')) {
          return SycmTableUtils.tranRatio(props.showZs, item).replaceAll('%', '');
        }
        if (currTab.title.includes('率')) {
          return item * 100;
        }
        if (currTab.titleZs == currTab.title || item === null) {
          return item;
        } else {
          return SycmTableUtils.tranNumber(props.showZs, item, 0, false);
        }
      }),
    });
    legend.push('品牌2');
  }
  if (props.brandLists?.brand3 && props.brandLists?.brand3.CustomerTrends) {
    series.push({
      name: '品牌3',
      type: 'line',
      smooth: true,
      data: props.brandLists.brand3.CustomerTrends[activeKey.value].map((item: any) => {
        if (currTab.title.includes('支付转化率')) {
          return SycmTableUtils.tranRatio(props.showZs, item).replaceAll('%', '');
        }
        if (currTab.title.includes('率')) {
          return item * 100;
        }
        if (currTab.titleZs == currTab.title || item === null) {
          return item;
        } else {
          return SycmTableUtils.tranNumber(props.showZs, item, 0, false);
        }
      }),
    });
    legend.push('品牌3');
  }
  options.value.legend.data = legend;
  options.value.series = series;
  options.value.xAxis[0].data = props.dates;
  // options.value.title.text = props.showZs ? `${currTab.titleZs}` : `${currTab.title}`;
  console.log(options.value);
}
watch(() => props.brandLists, () => {
  calcOptions();
}, {
  deep: true,
});
watch(() => activeKey.value, () => {
  calcOptions();
});
onMounted(() => {
  calcOptions();
});
watch(() => props.dates, () => {
  calcOptions();
}, {
  deep: true,
});
watch(() => props.showZs, () => {
  calcOptions();
});
</script>

<template>
  <a-row type="flex" v-for="tab in tabs" style="justify-content: center;">
    <a-col v-for="item in tab" :key="item.key" span="3" style="padding: 5px 10px;">
      <div class="tab-item" v-if="Object.keys(item).length>0" :class="{
        active: activeKey === item.key
      }"
           @click="()=>activeKey=item.key"
      >
        {{ showZs ? item.titleZs : item.title }}
      </div>
    </a-col>
  </a-row>
  <a-row type="flex" style="justify-content: center;padding-top: 10px;">
    <a-col :span="21">
      <EChart :options="options" style="height: 300px;"/>
    </a-col>
  </a-row>
</template>

<style lang="less" scoped>
.tab-item {
  padding: 5px 10px;
  cursor: pointer;
  border: 2px solid #e8e8e8;
  border-radius: 5px;
  text-align: center;

  &.active {
    color: #1890ff;
    border: 2px solid #1890ff;
  }
}
</style>
